import React, { useEffect, useState } from 'react'
import styles from '../css分支/Shop_detail.module.css'
import { Arrow, ChatO, Circle, SettingO, ArrowLeft } from '@react-vant/icons';
import { Grid, Image } from 'react-vant'
import { useNavigate,useLocation } from 'react-router-dom';
import axios from 'axios';

export default function Shop_detail() {
    const [items,setitems] = useState({})
    const location = useLocation()
    useEffect(()=>{
        setitems(location.state.item)
        console.log(location.state.item);
    },[])
    const navigate = useNavigate();
  return (
    <div className={styles.main}>
            <div className={styles.head}>
                <ArrowLeft style={{ marginLeft: '0.1rem' }} onClick={() => { navigate(-1) }} />
                <p style={{ fontSize: '0.22rem' }}>商品详情</p>
                <p style={{ marginRight: '0.1rem' }}></p>
            </div>
            <p style={{ marginLeft: '0.18rem', marginTop: '0.1rem' }}>基本信息</p>
            {/* <div className={styles.center}>
                <div style={{ marginLeft: '0.18rem' }}>
                    <p style={{ fontSize: '0.2rem' }}>店铺Logo</p>
                </div>
                <div style={{ marginRight: '0.18rem', display: 'flex', alignItems: 'center' }}>
                    <img src="/imgs/touxiang.png" alt="" style={{ width: '0.8rem', height: '0.8rem', borderRadius: '50%' }} />
                    <Arrow />
                </div>
            </div> */}
            <div className={styles.body}>
                <div className={styles.body_fen}>
                    <div >
                        <p style={{ fontSize: '0.2rem' }}>商品图片</p>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <img src={items.img} alt="" style={{ width: '0.6rem', height: '0.6rem', }} />
                        
                    </div>
                </div>
                <div className={styles.body_fen}>
                    <p style={{ marginRight: '1rem' }}>商品名称</p>
                    <p style={{ fontSize: '0.14rem' }}>{items.name}</p>
                </div>
                <div className={styles.body_fen}>
                    <p style={{ marginRight: '1rem' }}>商品分类</p>
                    <p>肠粉类</p>
                </div>
            </div>
            <p style={{ marginLeft: '0.18rem', marginTop: '0.1rem' }}>商品描述</p>
            <div className={styles.body2}>
                <div className={styles.body_fen}>
                    <div>
                        <p style={{ marginRight: '1rem' }}>商品类型</p>
                        <p style={{ fontSize: '0.12rem' }}></p>
                    </div>

                    <p>单品</p>
                </div>
                <div className={styles.body_fen}>
                    <p style={{ marginRight: '1rem' }}>描述</p>
                    <p>好吃不贵</p>
                </div>
                <div className={styles.body_fen}>
                    <p style={{ marginRight: '1rem' }}>主料</p>
                    <p>大米</p>
                </div>
                <div className={styles.body_fen}>
                    <p style={{ marginRight: '1rem' }}>口味</p>
                    <p>清淡</p>
                </div>
                <div className={styles.body_fen}>
                    <p style={{ marginRight: '1rem' }}>制作时长</p>
                    <p>5分钟</p>
                </div>
            </div>
            <p style={{ marginLeft: '0.18rem', marginTop: '0.1rem' }}>规格属性</p>
            <div className={styles.body3}>
                <div className={styles.body_fen}>
                    <div >
                        <p style={{ fontSize: '0.2rem' }}>规格名称</p>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        普通
                    </div>
                </div>
                <div className={styles.body_fen}>
                    <p style={{ marginRight: '1rem' }}>价格</p>
                    <p style={{ fontSize: '0.14rem' }}>￥{items.price}</p>
                </div>
            </div>
        </div>
  )
}
